(() => {
  const position = "absolute";
  class Snake {
    constructor(options) {
      options = options || {};
      this.width = options.width || 20;
      this.height = options.height || 20;
      this.color = options.color;
      this.length = options.length || 3;
      this.x = options.x;
      this.y = options.y;
      this.position = position;
      this.body = [
        { x: 3, y: 2, color: "red" },
        { x: 2, y: 2, color: "blue" },
        { x: 1, y: 2, color: "blue" },
      ];
      this.direction = "right";
      this.elements = [];
    }

    render(map) {
      for (let i = 0; i < this.body.length; i++) {
        let elemt = document.createElement("div");
        elemt.style.width = this.width + "px";
        elemt.style.height = this.height + "px";
        elemt.style.backgroundColor = this.body[i].color;
        elemt.style.position = this.position;
        elemt.style.left = this.body[i].x * this.width + "px";
        elemt.style.top = this.body[i].y * this.height + "px";
        elemt.style.position = this.position;
        map.appendChild(elemt);
        this.elements.push(elemt);
      }
    }
    move() {
      for (let i = this.body.length - 1; i > 0; i--) {
        this.body[i].x = this.body[i - 1].x;
        this.body[i].y = this.body[i - 1].y;
      }
      var head = this.body[0];
      switch (this.direction) {
        case "right":
          head.x += 1;
          break;
        case "left":
          head.x -= 1;
          break;
        case "top":
          head.y -= 1;
          break;
        case "bottom":
          head.y += 1;
      }
    };
    remove(map) {
      for (let i = this.elements.length - 1; i >= 0; i--) {
        map.removeChild(this.elements[i]);
      }
      this.elements = [];
    }
  }
  window.Snake = Snake;
})();
